<template>
  <div class="page-container page-container-create">
    <div class="toolbar">
      <div class="stepset">
        <ul>
          <li :class="{'active':active>=1}">
            <span>1</span>
            <p>设置基本信息</p>
          </li>
          <li :class="{'active':active>=2}">
            <span>2</span>
            <p>设置活动商品</p>
          </li>
          <li :class="{'active':active>=3}">
            <span>3</span>
            <p>创建成功</p>
          </li>
        </ul>
      </div>
      <div v-if="active == 1">
        <el-form
          :model="dataForm"
          label-width="120px"
          :rules="dataFormRules"
          ref="dataForm"
          :size="size"
          label-position="right"
          inline
        >
          <el-form-item label="ID：" prop="id" v-if="false">
            <el-input v-model="dataForm.id" :disabled="true" auto-complete="off"></el-input>
          </el-form-item>
          <el-row class="search-input">
            <el-form-item label="合同编码：" prop="code">
                  <el-input v-model="dataForm.code" :disabled="true" placeholder="合同编码自动生成"></el-input>
                </el-form-item>
                <el-form-item label="合同名称：" prop="name">
                  <el-input v-model="dataForm.name" placeholder="请输入合同名称"></el-input>
                </el-form-item>
                <el-form-item label="合同类型：" prop="busiType">
                  <el-select placeholder="请选择合同类型" v-model="dataForm.busiType" size="mini" :disabled="edit == 1 || busiType != null">
                    <el-option label="采购合同" :value="1"></el-option>
                    <el-option label="代销合同" :value="2"></el-option>
                    <el-option label="经销合同" :value="3"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="商家名称：" prop="merchantName">
                  <el-input v-model="dataForm.merchantName" :disabled="true" placeholder="请输入商家名称"></el-input>
                </el-form-item>
                <el-form-item label="合同属性：" prop="type">
                  <el-select placeholder="请选择" v-model="dataForm.type" size="mini" :disabled="edit == 1 || busiType != null">
                    <el-option label="自采合同" value="1"></el-option>
                    <el-option label="经销合同" value="2"></el-option>
                    <el-option label="代销合同" value="3"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="交易币别：" prop="tradeCurrency">
                  <el-select placeholder="请选择" v-model="dataForm.tradeCurrency" size="mini" :disabled="edit == 1">
                    <el-option label="CNY" value="CNY"></el-option>
                    <el-option label="USD" value="USD"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="供应商编码：" prop="supplierCode">
                  <el-input v-model="dataForm.supplierCode" :disabled="true" placeholder="请输入供应商编码"></el-input>
                </el-form-item>
                <el-form-item label="供应商名称：" prop="supplierName">
                  <el-input v-model="dataForm.supplierName" :disabled="true" placeholder="请输入供应商名称"></el-input>
                </el-form-item>
          </el-row>
          <template>
            <el-tabs v-model="activeName" @tab-click="handleClick" type="card" style="width:100%">
              <!-- 基本信息 -->
              <el-tab-pane label="基本信息" name="1">
                  <div>
                    <el-row>
                      <el-checkbox v-model="checked" @change="onchange">外贸合同</el-checkbox>
                    </el-row>
                    <el-row>
                      <el-col :span="12">
                        <el-form-item label="生效日期：" >
                          <el-date-picker
                            v-model="dataForm.startTime"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="生效日期"
                            style="width:200px"
                          ></el-date-picker>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="失效日期：" prop="remark">
                          <el-date-picker
                            v-model="dataForm.endTime"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="失效日期"
                            style="width:200px"
                          ></el-date-picker>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </div>
                  <!-- <el-row>
                    <el-checkbox v-model="checked1" @change="onchangeType">指定合同商品类目</el-checkbox>
                  </el-row> -->
                  <!-- 财务信息 -->
                  <!-- <el-divider></el-divider> -->
                  <div>
                    <el-row>
                      <span>财务信息</span>
                    </el-row>
                    <el-row>
                      <el-col :span="12">
                        <el-form-item label="结算方式：">
                          <el-select style="width:200px" v-model="dataForm.billSettlement">
                            <el-option label="账期结算" :value="1">账期结算</el-option>
                            <!-- <el-option label="账期结算" value="2">账期结算</el-option> -->
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="付款账期：">
                          <el-select style="width:200px" v-model="dataForm.paymentPeriod">
                            <el-option label="日账期" :value="1">日账期</el-option>
                            <el-option label="月账期" :value="2">月账期</el-option>
                            <el-option label="年账期" :value="3">年账期</el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="12">
                        <el-form-item label="支持开票：" class="radio-item">
                          <el-radio v-model="dataForm.supportInvoicing" :label="1" :value="1">允许</el-radio>
                          <el-radio v-model="dataForm.supportInvoicing" :label="2" :value="2">不允许</el-radio>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="支持专票：" class="radio-item">
                          <el-radio v-model="dataForm.supportSpecialTicket" :label="1">允许</el-radio>
                          <el-radio v-model="dataForm.supportSpecialTicket" :label="2">不允许</el-radio>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </div>
                  <!-- 外贸信息 -->
                  <div v-if="foreignTrade">
                    <!-- <el-divider></el-divider> -->
                    <el-row>
                      <span>外贸信息</span>
                    </el-row>
                    <el-row>
                      <el-col :span="12">
                        <el-form-item label="结算货币：" >
                          <el-select style="width:200px" v-model="dataForm.settlementCurrency">
                            <el-option label="CNY" value="CNY"></el-option>
                            <el-option label="USD" value="USD"></el-option>
                            <el-option label="AUD" value="AUD"></el-option>
                            <el-option label="GBP" value="GBP"></el-option>
                            <!-- <el-option label="账期结算" value="2">账期结算</el-option> -->
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="贸易方式：" >
                          <el-select style="width:200px" v-model="dataForm.formsOfCommerce">
                            <el-option label="日账期" :value="1">日账期</el-option>
                            <el-option label="月账期" :value="2">月账期</el-option>
                            <el-option label="年账期" :value="3">年账期</el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="成交方式：" >
                          <el-select style="width:200px" v-model="dataForm.transactionMethod">
                            <el-option label="工厂交货（EXW）" :value="1">工厂交货（EXW）</el-option>
                            <el-option label="边境交货(DAF)" :value="2">边境交货(DAF)</el-option>
                            <el-option label="目的港船上交货(DES)" :value="3">目的港船上交货(DES)</el-option>
                            <el-option label="目的港码头交货(DEQ)" :value="4">目的港码头交货(DEQ)</el-option>
                            <el-option label="未完税交货(DDU)" :value="5">未完税交货(DDU)</el-option>
                            <el-option label="完税后交货(DDP)" :value="6">完税后交货(DDP)</el-option>
                            <el-option label="货交承运人（FCA）" :value="7">货交承运人（FCA）</el-option>
                            <el-option label="船边交货（FAS)" :value="8">船边交货（FAS)</el-option>
                            <el-option label="船上交货（FOB）" :value="9">船上交货（FOB）</el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                    <!-- </el-row> -->
                    <!-- <el-row> -->
                      <el-col :span="12">
                        <el-form-item label="运输方式：" >
                          <el-select style="width:200px" v-model="dataForm.modeOfTransport">
                            <el-option label="海运" :value="1">海运</el-option>
                            <el-option label="多式联运" :value="2">多式联运</el-option>
                            <el-option label="空运" :value="3">空运</el-option>
                            <el-option label="铁路" :value="4">铁路</el-option>
                            <el-option label="公路" :value="5">公路</el-option>
                            <el-option label="内河" :value="6">内河</el-option>
                            <el-option label="专递或邮寄" :value="7">专递或邮寄</el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="装运港：" >
                          <el-select style="width:200px" v-model="dataForm.portOfShipment">
                            <el-option label="是" :value="1">是</el-option>
                            <el-option label="否" :value="2">否</el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="抵运港：" >
                          <el-select style="width:200px" v-model="dataForm.portOfArrival">
                            <el-option label="是" :value="1">是</el-option>
                            <el-option label="否" :value="2">否</el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </div>
                  <el-col :span="12">
                    <el-form-item label="备注：" prop="remark">
                      <el-input type="textarea" v-model="dataForm.remark" style="width:700px"></el-input>
                    </el-form-item>
                  </el-col>
                </el-tab-pane>
              <el-tab-pane label="费用信息" name="2">
                <el-row class="t_r">
                  <el-button :size="size" @click="deleteTableDataprice" type="primary">删除所选费用类型</el-button>
                  <el-button :size="size" @click="addprice" type="primary">添加费用类型</el-button>
                </el-row>
                <template>
                  <el-table
                    :data="tableDataprice"
                    border
                    @selection-change="selectTableDataprice"
                    style="width: 100%"
                  >
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="billingCycle" label="计费周期">
                      <template slot-scope="scope">
                        <span v-if="scope.row.billingCycle ==1">按月</span>
                        <span v-if="scope.row.billingCycle ==2">按季度</span>
                        <span v-if="scope.row.billingCycle ==3">按年</span>
                        <span v-if="scope.row.billingCycle ==4">一次性费用</span>
                        <span v-if="scope.row.billingCycle ==5">手动创建</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="billingBasis" label="计费基准">
                      <template slot-scope="scope">
                        <span v-if="scope.row.billingBasis ==1">销售额</span>
                        <span v-if="scope.row.billingBasis ==2">销售成本</span>
                        <span v-if="scope.row.billingBasis ==3">进退货金额</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="billingMethod" label="计费方式">
                      <template slot-scope="scope">
                        <span v-if="scope.row.billingMethod ==1">固定比例</span>
                        <span v-if="scope.row.billingMethod ==2">固定金额</span>
                        <span v-if="scope.row.billingMethod ==3">阶梯费用</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="generateType" label="生成费用单方式">
                      <!-- <span v-if="scope.row.generateType == 1"></span> -->
                      <template slot-scope="scope">{{scope.row.generateType == 1 ? '自动审核' : '手动审核'}}</template>
                    </el-table-column>
                    <el-table-column prop="auditMethod" label="审核方式">
                      <template slot-scope="scope">{{scope.row.auditMethod == 1 ? '自动审核' : '手动审核'}}</template>
                    </el-table-column>
                    <el-table-column prop="guaranteedFlag" label="是否设置保底金额">
                      <template
                        slot-scope="scope"
                      >{{scope.row.guaranteedFlag == 1 ? '是' : '否'}}</template>
                    </el-table-column>
                    <el-table-column prop="guaranteedAmount" label="保底金额"></el-table-column>
                    <el-table-column prop="costAmount" label="费用金额(元)"></el-table-column>
                    <el-table-column prop="costProportion" label="计费比率(%)"></el-table-column>
                    <el-table-column prop="remark" label="	备注"></el-table-column>
                    <el-table-column prop="billingMethod" label="	阶梯费用">
                      <template slot-scope="scope">{{scope.row.billingMethod == 3 ? '是' : '否'}}</template>
                    </el-table-column>
                  </el-table>
                </template>
              </el-tab-pane>
              <el-tab-pane label="合同附件" name="3">
                <el-row class="t_r">
                  <el-button :size="size" @click="uploadfile" type="primary">上传合同附件</el-button>
                  <el-button :size="size" @click="deleteContractFile" type="primary">删除</el-button>
                </el-row>
                <template>
                  <el-table
                    :data="tableDataFile"
                    border
                    @selection-change="selectTableDataFile"
                    style="width: 100%"
                  >
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="annexName" label="合同附件" width="260"></el-table-column>
                    <el-table-column prop="creatorName" label="上载人" width="260"></el-table-column>
                    <el-table-column prop="createTime" label="上载时间" width="260"></el-table-column>
                  </el-table>
                </template>
              </el-tab-pane>
              <!-- <el-tab-pane label="查看合同协议" name="4">
                  <el-row class="t_r">
                    <el-button :size="size" @click="addprotocol" type="primary">新增合同模板</el-button>
                  </el-row>
                  <template>
                    <el-table :data="tableDataprotocol" border="" style="width: 100%">
                      <el-table-column prop="1" label="合同类型" width="180"></el-table-column>
                      <el-table-column prop="2" label="模板编号" width="180"></el-table-column>
                      <el-table-column prop="3" label="版本号"></el-table-column>
                      <el-table-column prop="4" label="模板名称"></el-table-column>
                      <el-table-column prop="5" label="模板附件"></el-table-column>
                      <el-table-column prop="6" label="上载人"></el-table-column>
                      <el-table-column prop="7" label="上载时间"></el-table-column>
                      <el-table-column prop="8" label="备注"></el-table-column>
                      <el-table-column fixed="right" label="操作" width="100">
                          <el-button @click="addprotocol" type="text" size="small">编辑</el-button>
                          <el-button type="text" size="small" @click="handleDelete">删除</el-button>
                      </el-table-column>
                    </el-table>
                  </template>
              </el-tab-pane>-->
              <!-- <el-tab-pane label="操作日志" name="5">
                  <template>
                    <el-table :data="tableDatapeople" border="" style="width: 100%">
                      <el-table-column prop="1" label="操作用户ID" width="180"></el-table-column>
                      <el-table-column prop="2" label="操作人" width="180"></el-table-column>
                      <el-table-column prop="3" label="操作时间"></el-table-column>
                      <el-table-column prop="4" label="操作"></el-table-column>
                      <el-table-column prop="5" label="备注"></el-table-column>
                    </el-table>
                  </template>
              </el-tab-pane>-->
              <el-tab-pane label="联系人" name="6">
                <el-row class="t_r">
                  <el-button :size="size" @click="addUserInfo" type="primary">新增联系人</el-button>
                </el-row>
                <template>
                  <el-table :data="tableDatalink" border style="width: 100%">
                    <el-table-column prop="contactName" label="联系人" width="140"></el-table-column>
                    <el-table-column prop="contactPosition" label="联系人职位" width="140"></el-table-column>
                    <el-table-column prop="egularPhone" label="联系人固定电话" width="140"></el-table-column>
                    <el-table-column prop="mobile" label="联系人手机" width="180"></el-table-column>
                    <el-table-column prop="email" label="联系人Email" width="140"></el-table-column>
                    <el-table-column prop="address" label="联系地址" width="140"></el-table-column>
                    <el-table-column prop="dmainContactsFlag" label="主要联系人" width="150">
                      <template slot-scope="scope">{{scope.row.dmainContactsFlag == 1 ? '否' : '是'}}</template>
                    </el-table-column>
                    <el-table-column prop="remark" label="备注" width="150"></el-table-column>
                    <el-table-column fixed="right" label="操作" width="350">
                      <template slot-scope="scope">
                        <el-button @click="deleteUserInfo(scope.$index)" type="text" size="small">删除</el-button>
                        <el-button type="text" size="small" @click="editUser(scope.row)">编辑</el-button>
                        <el-button
                          @click="setPrimaryContact(scope.$index)"
                          type="text"
                          size="small"
                        >主要联系人</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </template>
              </el-tab-pane>
              <el-tab-pane label="店铺信息" name="7">
                <el-row class="t_r">
                  <el-button :size="size" @click="addshop" type="primary">添加店铺组织</el-button>
                </el-row>
                <template>
                  <el-table :data="tableDatashop" border style="width: 100%">
                    <el-table-column prop="storeCode" label="店铺编码" width="180"></el-table-column>
                    <el-table-column prop="storeName" label="店铺名称" width="180"></el-table-column>
                    <el-table-column prop="storeType" label="店铺类型"></el-table-column>
                    <el-table-column prop="address" label="店铺地址"></el-table-column>
                    <el-table-column fixed="right" label="操作" width="100">
                      <!-- <template slot-scope="scope"> -->
                      <el-button @click="handleDelete" type="text" size="small">删除</el-button>
                      <!-- </template> -->
                    </el-table-column>
                  </el-table>
                </template>
              </el-tab-pane>
            </el-tabs>
          </template>
          <!-- <el-row style="text-align:center">
            <el-form-item>
              <kt-button icon="fa fa-search" :label="$t('action.search')"  type="primary" @click="findPage(filters)"/>
            </el-form-item>
            <el-form-item>
              <kt-button icon="fa fa-refresh" :label="$t('action.reset')"  @click="reset" type="primary"/>
            </el-form-item>
            
          </el-row>-->
        </el-form>
      </div>
      <div v-if="active == 2">
        <el-row>
          <el-button :size="size" @click="selectProduct" type="primary">选择商品</el-button>
        </el-row>
        <el-table :data="this.paramsFilters.res.rows" border style="width: 100%">
          <el-table-column prop="checkss" type="selection"></el-table-column>
          <el-table-column prop="chineseName" label="商品名称" width="180"></el-table-column>
          <el-table-column prop="merchantName" label="商家名称" width="180"></el-table-column>
          <el-table-column prop="storeName" label="店铺名称" width="180"></el-table-column>
          <el-table-column prop="code" label="商品编码" width="180"></el-table-column>
          <el-table-column prop="amountWithoutTax" label="本次采购价" width="180">
            <template slot-scope="scope">
              <el-input
                size="mini"
                v-model="scope.row.amountWithoutTax"
                @change="change(scope.$index,scope.row)"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="商品类型" width="180" :formatter="formatType"></el-table-column>
          <el-table-column prop="canSale" label="上下架状态" width="180" :formatter="formatCanSale"></el-table-column>
        </el-table>
      </div>
      <div class="tab-container tab-success createSet" v-show="active==3">
        <div class="titleInfo">
          <img src="/static/images/success.png" />
          <span class="font20">合同创建成功!</span>
        </div>

        <div class="step-button2">
          <el-button class="resetButton" plain @click="detailList">查看合同动列表</el-button>
        </div>
      </div>

      <div class="step-button">
        <el-button
          class="cancelButton"
          :plain="active != 1 && active != 3"
          :size="size"
          v-if="active != 1 && active != 3"
          @click="back"
        >上一步</el-button>
        <el-button class="searchButton" :size="size" @click="next" v-show="active!=3">下一步</el-button>
      </div>
    </div>

    <el-dialog title="添加费用类型" width="35%" :visible.sync="addCostType" :close-on-click-modal="false">
      <el-form
        :model="costDataForm"
        label-width="140px"
        :rules="costDataFormRules"
        ref="costDataForm"
        :size="size"
        label-position="right"
        inline
      >
        <el-row class="search-input">
          <el-form-item label="计费周期：" prop="billingCycle">
            <el-select v-model="costDataForm.billingCycle" style="width:200px">
              <el-option label="按月" value="1"></el-option>
              <el-option label="按季度" value="2"></el-option>
              <el-option label="按年" value="3"></el-option>
              <el-option label="一次性费用" value="4"></el-option>
              <el-option label="手动创建" value="5"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="计费方式：" prop="billingMethod">
            <el-select v-model="costDataForm.billingMethod">
              <el-option label="固定比例" value="1"></el-option>
              <el-option label="固定金额" value="2"></el-option>
              <el-option label="阶梯费用" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="计费基准："
            prop="billingBasis"
            v-if="costDataForm.billingCycle != 4 && costDataForm.billingMethod != 2"
          >
            <el-select v-model="costDataForm.billingBasis">
              <el-option label="销售额" value="1"></el-option>
              <el-option label="销售成本" value="2"></el-option>
              <el-option label="进退货金额" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="生成费用单方式：" prop="generateType">
            <el-select v-model="costDataForm.generateType">
              <el-option label="自动生成" value="1"></el-option>
              <el-option label="手动生成" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="审核方式：" prop="auditMethod">
            <el-select v-model="costDataForm.auditMethod">
              <el-option label="自动审核" value="1"></el-option>
              <el-option label="手动审核" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="费用金额(元)：" prop="costAmount" v-if="costDataForm.billingMethod == 2">
            <el-input v-model="costDataForm.costAmount" auto-complete="off" placeholder="请输入费用金额">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="计费比率：" prop="costProportion" v-if="costDataForm.billingMethod == 1">
            <el-input v-model="costDataForm.costProportion" auto-complete="off" placeholder="请输入计费比率">
              <template slot="append">%</template>
            </el-input>
          </el-form-item>
          <el-form-item
            label="设置保底金额："
            class="radio-item"
            prop="guaranteedFlag"
            v-if="costDataForm.billingMethod != 3"
          >
            <el-radio v-model="costDataForm.guaranteedFlag" label="1">是</el-radio>
            <el-radio v-model="costDataForm.guaranteedFlag" label="2">否</el-radio>
          </el-form-item>
          <el-form-item
            label="保底金额："
            prop="guaranteedAmount"
            v-if="costDataForm.guaranteedFlag == '1'"
          >
            <el-input
              v-model="costDataForm.guaranteedAmount"
              auto-complete="off"
              placeholder="请输入保底金额"
            >
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="备注：" prop="remark">
            <el-input v-model="costDataForm.remark" auto-complete="off" placeholder="请输入备注"></el-input>
          </el-form-item>
        </el-row>
        <el-row></el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="addCostType = false">{{$t('action.cancel')}}</el-button>
        <el-button
          :size="size"
          type="primary"
          @click.native="saveCostType"
          :loading="editLoading"
        >{{$t('action.submit')}}</el-button>
      </div>
    </el-dialog>

    <el-dialog title="上传合同附件" width="35%" :visible.sync="uploadModal" :close-on-click-modal="false">
      <el-row>
        <el-upload
          class="upload-demo"
          :action="utils.imgUploadUrl"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          multiple
          :on-success="successFile"
          :file-list="fileList"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-row>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click="saveContractFile" type="primary">确认</el-button>
        <el-button :size="size" @click.native="uploadModal = false">{{$t('action.cancel')}}</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :title="operation?'新增':'编辑'"
      width="65%"
      :visible.sync="userModal"
      :close-on-click-modal="false"
    >
      <el-form
        :model="userDataForm"
        label-width="140px"
        :rules="userDataFormRules"
        ref="userDataForm"
        :size="size"
        label-position="right"
        inline
      >
        <el-row class="search-input">
          <el-form-item label="联系人：" prop="contactName">
            <el-input v-model="userDataForm.contactName" auto-complete="off" placeholder="请输入联系人"></el-input>
          </el-form-item>
          <el-form-item label="联系人职位：" prop="contactPosition">
            <el-input
              v-model="userDataForm.contactPosition"
              auto-complete="off"
              placeholder="请输入联系人职位"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系人固定电话：" prop="egularPhone">
            <el-input
              v-model="userDataForm.egularPhone"
              auto-complete="off"
              placeholder="请输入联系人固定电话"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系人手机：" prop="mobile">
            <el-input
              v-model="userDataForm.mobile"
              auto-complete="off"
              placeholder="请输入联系人手机"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系人Email：" prop="email">
            <el-input
              v-model="userDataForm.email"
              auto-complete="off"
              placeholder="请输入联系人Email"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系地址：" prop="address">
            <el-input
              v-model="userDataForm.address"
              auto-complete="off"
              placeholder="请输入联系地址"
            ></el-input>
          </el-form-item>
          <el-form-item label="备注：" prop="remark">
            <el-input v-model="userDataForm.remark" auto-complete="off" placeholder="请输入备注"></el-input>
          </el-form-item>
        </el-row>
        <el-row></el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="userModal = false">{{$t('action.cancel')}}</el-button>
        <el-button
          :size="size"
          type="primary"
          @click.native="saveUserInfo"
          :loading="editLoading"
        >{{$t('action.submit')}}</el-button>
      </div>
    </el-dialog>

    <!-- 店铺弹框 -->
    <el-dialog
      :title="operation?'新增':'编辑'"
      width="45%"
      :visible.sync="shopModal"
      :close-on-click-modal="false"
    >
      <el-form
        :model="storeForm"
        label-width="140px"
        :rules="dataFormRules"
        ref="storeForm"
        :size="size"
        label-position="right"
        inline
      >
        <el-form-item label="ID：" prop="id" v-if="false">
          <el-input v-model="storeForm.id" :disabled="true" auto-complete="off"></el-input>
        </el-form-item>
        <el-row class="search-input">
          <el-form-item label="店铺编码：" prop="storeCode">
            <el-input v-model="storeForm.storeCode" auto-complete="off" placeholder="请输入"></el-input>
          </el-form-item>
          <!-- <el-form-item label="供应商名称：" prop="remark">
            <el-input v-model="dataForm.remark" auto-complete="off" placeholder="请输入"></el-input>
          </el-form-item>-->
        </el-row>
      </el-form>
      <el-row style="text-align:right;margin-bottom:20px">
        <kt-button icon="fa fa-search" :label="$t('action.search')" type="primary" />
      </el-row>
      <el-table
        :data="tableDatashopmodal"
        @selection-change="selectTableDatashopmodal"
        border
        style="width: 100%"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="business" label="商家名称"></el-table-column>
        <el-table-column prop="storeCode" label="店铺编码"></el-table-column>
        <el-table-column prop="storeName" label="店铺名称"></el-table-column>
        <el-table-column prop="address" label="店铺地址"></el-table-column>
      </el-table>
      <!--分页栏-->
      <div class="toolbar t_r">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="handleCurrentChangeStore"
          :current-page="storeForm.pageNo"
          :page-size="storeForm.pageSize"
          :total="totalSize"
          :page-sizes="[10, 20, 30, 40]"
          @size-change="handleSizeChangeStore"
        ></el-pagination>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click="saveShopList" type="primary">提交</el-button>
        <el-button :size="size" @click.native="shopModal = false">{{$t('action.cancel')}}</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="选择商品"
      width="65%"
      :visible.sync="selectProductModel"
      :close-on-click-modal="false"
    >
      <div>
        <div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;">
          <el-form :inline="true" :model="queryFiteris" :size="size" ref="queryFiteris">
            <el-form-item prop="storeName">
              <el-input v-model="queryFiteris.storeName" placeholder="店铺名称"></el-input>
            </el-form-item>
            <el-row>
              <el-form-item>
                <kt-button
                  icon="fa fa-search"
                  :label="$t('action.search')"
                  type="primary"
                  @click="queryShopapi(null)"
                />
              </el-form-item>
              <el-form-item>
                <kt-button
                  icon="fa fa-refresh"
                  :label="$t('action.reset')"
                  type="primary"
                  @click="resetForm()"
                />
              </el-form-item>
            </el-row>
          </el-form>
        </div>
        <el-table
          :data="this.shopFilters.res.rows"
          border
          style="width: 100%"
          @selection-change="handleSelectionChangeShop"
        >
          <el-table-column prop="checkss" type="selection"></el-table-column>
          <el-table-column prop="chineseName" label="商品名称" width="180"></el-table-column>
          <el-table-column prop="merchantName" label="商家名称" width="180"></el-table-column>
          <el-table-column prop="storeName" label="店铺名称" width="180"></el-table-column>
          <el-table-column prop="code" label="商品编码" width="180"></el-table-column>
          <!-- <el-table-column prop="productVolume" label="体积(cm^3)" width="180"></el-table-column>
            <el-table-column prop="shelfLifeDays" label="保质期天数" width="180"></el-table-column>
          <el-table-column prop="returnDays" label="包退天数" width="180"></el-table-column>-->

          <!-- <el-table-column prop="thirdProductCode" label="第三方商品编码" width="180"></el-table-column> -->
          <el-table-column prop="type" label="商品类型" width="180" :formatter="formatType"></el-table-column>
          <!-- <el-table-column prop="artNo" label="货号" width="180"></el-table-column> -->
          <!-- <el-table-column prop="freightTemplateId" label="运费模板id" width="180"></el-table-column> -->
          <!-- <el-table-column prop="status" label="审核状态" width="180"></el-table-column> -->
          <!-- <el-table-column prop="saleCalcUnitId" label="销售计量单位主键id" width="180"></el-table-column> -->
          <el-table-column prop="canSale" label="上下架状态" width="180" :formatter="formatCanSale"></el-table-column>
          <!-- <el-table-column prop="dataType" label="商品数据类型" width="180"></el-table-column>
          <el-table-column prop="barCode" label="商品条形码" width="180"></el-table-column>-->
        </el-table>
        <div class="block" style="text-align: right;">
          <el-pagination
            @size-change="handleSizeChangeProduct"
            @current-change="handleCurrentChangeProduct"
            :current-page="this.pageRequestProduct.start"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="this.shopFilters.res.total"
          ></el-pagination>
        </div>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click="saveProduct" type="primary">确认</el-button>
        <el-button :size="size" @click.native="selectProductModel = false">{{$t('action.cancel')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import PopupTreeInput from "@/components/PopupTreeInput";
import { formatDate2 } from "@/utils/datetime.js";
import CyTable from "@/views/Core/CyTable";
import KtButton from "@/views/Core/KtButton";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
import { format } from "@/utils/datetime";
import XLSX from "xlsx";
import axios from "axios";
import { exportExcel } from "@/utils/excel";

export default {
  components: {
    PopupTreeInput,
    CyTable,
    KtButton,
    TableColumnFilterDialog,
  },
  data() {
    return {
      //合同编码
      contractCode: "",
      contractId: null,
      editLoading: false,
      active: 1,
      dataFormRules: {
        busiType:[
          {required: true, message: '请选择合同类型', trigger: "blur" }
        ],
        tradeCurrency:[
          {required: true, message: '请选择交易币别', trigger: "blur" }
        ],
        type:[
          {required: true, message: '请选择合同属性', trigger: "blur" }
        ],
        name:[
          {required: true, message: '请输入合同名称', trigger: "blur" }
        ],
      },
      storeForm: {
        start: 1,
        limit: 10,
      },
      dataForm:{
        code: this.contractCode
      },
      totalSize: 0, //总条数
      size: "mini",
      activeName: "1",
      radio: "1",
      radio1: "1",
      checked: false,
      checked1: false,
      foreignTrade: false,
      types: false,
      detailpage: false,
      filters: {
        startDate: "",
      },

      tableDataprice: [],
      tableDataprotocol: [
        {
          1: "经销合同",
          2: "20190917155550",
          3: "V1",
          4: "经销合同模板",
          5: " 3.jpg",
          6: "merchant",
          7: "2019-09-17 15:55:50",
          8: "是",
        },
      ],
      tableDatapeople: [
        {
          1: "19090215374897",
          2: "superadmin",
          3: "2019-12-25 14:46:19",
          4: "添加合同原件",
          5: "是",
        },
        {
          1: "19090215374897",
          2: "superadmin",
          3: "2019-12-25 14:46:19",
          4: "添加合同原件",
          5: "是",
        },
        {
          1: "19090215374897",
          2: "superadmin",
          3: "2019-12-25 14:46:19",
          4: "添加合同原件",
          5: "是",
        },
      ],
      tableDatalink: [],
      tableDatashop: [],
      tableDatashopmodal: [],

      addCostType: false,

      costDataFormRules: {
        guaranteedAmount: [
          { required: false, message: "请输入保底金额", trigger: "blur" },
        ],
        guaranteedFlag: [
          { required: true, message: "请选择设置保底金额", trigger: "change" },
        ],
        costProportion: [
          { required: true, message: "请输入计费比率", trigger: "blur" },
        ],
        costAmount: [
          { required: false, message: "请输入费用金额", trigger: "blur" },
        ],
        billingBasis: [
          { required: true, message: "请选择计费基准", trigger: "change" },
        ],

        billingCycle: [
          { required: true, message: "请选择计费周期", trigger: "change" },
        ],
        billingMethod: [
          { required: true, message: "请选择计费方式", trigger: "change" },
        ],
        generateType: [
          {
            required: true,
            message: "请选择生成费用单方式",
            trigger: "change",
          },
        ],
        auditMethod: [
          { required: true, message: "请选择审核方式", trigger: "change" },
        ],
      },
      costDataForm: {
        costAmount: null,
        costProportion: null,
        billingCycle: "1",
        billingMethod: "1",
        billingBasis: "1",
        generateType: "1",
        auditMethod: "1",
        guaranteedFlag: "2",
      },

      index_: 1,
      selectTableDatapriceData: [],

      //上传合同
      uploadModal: false,
      fileList: [],
      tableDataFile: [],
      selectTableDataFileData: [],

      //联系人
      operation: true,

      userModal: false,
      userDataForm: {
        remark: "",
        address: "",
        email: "",
        mobile: "",
        egularPhone: "",
        contactPosition: "",
        contactName: "",
      },
      userDataFormRules: {
        contactName: [
          { required: true, message: "请输入联系人", trigger: "blur" },
        ],
        egularPhone: [
          { required: true, message: "请输入联系人固定电话", trigger: "blur" },
        ],
        mobile: [
          { required: true, message: "请输入联系人手机", trigger: "blur" },
        ],
      },

      shopModal: false,
      selectTableDatashopmodalData: [],

      //第二步
      paramsFilters: {
        res: {
          total: 0,
          code: "0000",
          rows: [],
        },
      },
      shopFilters: {
        res: {
          total: 0,
          code: "0000",
          rows: [],
        },
      },
      pageRequestProduct: { start: 1, limit: 10 },

      selectProductModel: false,
      queryFiteris: {},
      multipleSelectionShop: [],
      shopContract: [],
      edit: 0,
      busiType:0
    };
  },
  watch: {
    "costDataForm.guaranteedFlag": function (val) {
      if (val == 1) {
        this.costDataFormRules.guaranteedAmount[0].required = true;
      } else {
        this.costDataFormRules.guaranteedAmount[0].required = false;
      }
    },

    "costDataForm.billingMethod": function (val) {
      if (val == 1) {
        this.costDataFormRules.costProportion[0].required = true;
      } else {
        this.costDataFormRules.costProportion[0].required = false;
      }
      if (val == 2) {
        this.costDataFormRules.costAmount[0].required = true;
        this.costDataFormRules.billingBasis[0].required = false;
      } else {
        this.costDataFormRules.costAmount[0].required = false;
        this.costDataFormRules.billingBasis[0].required = true;
      }
      if (val != 3) {
        this.costDataFormRules.guaranteedFlag[0].required = true;
      } else {
        this.costDataFormRules.guaranteedFlag[0].required = false;
      }
    },

    "costDataForm.billingCycle": function (val) {
      if (val != 4) {
        this.costDataFormRules.billingBasis[0].required = true;
      } else {
        this.costDataFormRules.billingBasis[0].required = false;
      }
    },
    "dataForm.settlementCurrency": function (val) {
      if (val != 0 && val != null) {
        this.checked = true;
        this.foreignTrade = true;
      } else {
        this.checked = false;
        this.foreignTrade = false;
      }
    },
  },
  methods: {
    findStorePage: function (data) {
      let this_ = this;
      this_.utils.request.queryStoreListPage(this_.storeForm, function (res) {
        if (res.data != null && res.data.rows && res.data.rows.length > 0) {
          res.data.rows.forEach((item)=>{
            let store = {
              business:item.merchantName,
              storeCode:item.storeCode,
              storeName:item.storeName,
              // storeType: item.
              storeId: item.id,
              address:item.addressDetail
            }
            this_.tableDatashopmodal.push(store);
          });
          this_.totalSize = Number(res.data.total);
        }
      });
    },
    handleSizeChangeStore(val) {
      this.storeForm.limit = val;
      this.storeForm.start = 1;
    },
    handleCurrentChangeStore(val) {
      this.storeForm.start = val;
      this.findStorePage();
    },
    formatCanSale(row, column, cellValue, index) {
      if (cellValue == 0) {
        return "上架";
      } else if (cellValue == 1) {
        return "下架";
      }
    },
    change(index, e) {
      let this_ = this;
      this.shopContract.push(e);
      console.log(e);
      console.log(this.shopContract);
    },
    formatType(row, column, cellValue, index) {
      if (cellValue == 1) {
        return "常规商品";
      } else if (cellValue == 2) {
        return "卡卷";
      } else if (cellValue == 3) {
        return "海购";
      } else if (cellValue == 4) {
        return "赠品";
      }
    },
    onchangeType(data) {
      if (data == true) {
        this.types = true;
      } else {
        this.types = false;
      }
    },
    onchange(data) {
      if (data == true) {
        this.foreignTrade = true;
      } else {
        this.foreignTrade = false;
      }
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },

    confim() {
      this.detailpage = false;
      this.dataForm = {};
      this.$message({ message: "操作成功", type: "success" });
    },
    addshop() {
      this.shopModal = true;
      this.findStorePage();
    },
    //合同模板新增
    addprotocol() {
      this.condialogVisible = true;
    },
    //上传
    uploadfile() {
      this.uploadModal = true;
      this.fileList = [];
    },
    //费用信息新增
    addprice() {
      if (this.$refs["costDataForm"] != null) {
        this.$refs["costDataForm"].resetFields();
      }
      this.addCostType = true;
    },

    // 批量删除
    handleDelete: function (data) {
      var ids = "";
      for (var i = 0; i < data.params.length; i++) {
        ids = ids + data.params[i].id + ",";
      }
      data.ids = ids;
      this.utils.request.deletePurchaseContract(data, this.deleteInfoBack);
    },
    //删除callback
    deleteInfoBack(data) {
      if (data.code == "0000") {
        this.$message({ message: "操作成功", type: "success" });
      } else {
        this.$message({ message: "操作失败, ", type: "error" });
      }
      this.findPage();
    },

    //保存费用类型
    saveCostType() {
      this.$refs["costDataForm"].validate((valid) => {
        if (valid) {
          this.editLoading = true;
          this.costDataForm.index_ = this.index_++;
          this.tableDataprice.push(this.costDataForm);
          this.addCostType = false;
          this.$message({ message: "添加成功", type: "success" });
          this.editLoading = false;
        }
      });
    },

    selectTableDataprice(val) {
      console.log(val);
      this.selectTableDatapriceData = val;
    },

    selectTableDataFile(val) {
      console.log(val);
      this.selectTableDataFileData = val;
    },

    deleteTableDataprice() {
      if (this.selectTableDatapriceData.length < 1) {
        this.$message({ message: "至少选择一条数据", type: "warning" });
        return false;
      }
      this.$confirm("确认删除所选数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.selectTableDatapriceData.forEach((item) => {
          this.tableDataprice.forEach((info, index) => {
            if (item.index_ == info.index_) {
              this.tableDataprice.splice(index, 1);
            }
          });
        });
        this.$message({ message: "删除成功", type: "success" });
      });
    },

    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.fileList = fileList;
    },
    handlePreview(file) {
      console.log(file);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    successFile(res, file) {
      console.log(res);
      file.annexUrl = res.data.imgUrl;
      this.fileList.push(file);
    },
    saveContractFile() {
      this.fileList.forEach((item) => {
        this.tableDataFile.push({
          annexName: item.name,
          annexUrl: item.annexUrl,
          creatorName: JSON.parse(localStorage.getItem("user")).username,
          createTime: formatDate2(new Date()),
          index_: this.index_++,
        });
      });
      this.uploadModal = false;
      this.$message({ message: "添加成功", type: "success" });
    },
    deleteContractFile() {
      if (this.selectTableDataFileData.length < 1) {
        this.$message({ message: "至少选择一条数据", type: "warning" });
        return false;
      }
      this.$confirm("确认删除所选数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.selectTableDataFileData.forEach((item) => {
          this.tableDataFile.forEach((info, index) => {
            if (item.index_ == info.index_) {
              this.tableDataFile.splice(index, 1);
            }
          });
        });
        this.$message({ message: "删除成功", type: "success" });
      });
    },

    //保存联系人信息
    saveUserInfo() {
      this.$refs["userDataForm"].validate((valid) => {
        if (valid) {
          if (this.userDataForm.index_ == null) {
            this.tableDatalink.push({
              remark: this.userDataForm.remark,
              address: this.userDataForm.address,
              email: this.userDataForm.email,
              mobile: this.userDataForm.mobile,
              egularPhone: this.userDataForm.egularPhone,
              contactPosition: this.userDataForm.contactPosition,
              contactName: this.userDataForm.contactName,
              dmainContactsFlag: 1,
              index_: this.index_++,
            });
          } else {
            //编辑
            this.tableDatalink.forEach((item, index) => {
              if (item.index_ == this.userDataForm.index_) {
                this.$set(this.tableDatalink, index, {
                  remark: this.userDataForm.remark,
                  address: this.userDataForm.address,
                  email: this.userDataForm.email,
                  mobile: this.userDataForm.mobile,
                  egularPhone: this.userDataForm.egularPhone,
                  contactPosition: this.userDataForm.contactPosition,
                  contactName: this.userDataForm.contactName,
                  dmainContactsFlag: 1,
                  index_: this.index_++,
                });
              }
            });
          }
          this.userModal = false;
          this.$message({ message: "添加成功", type: "success" });
        }
      });
    },
    addUserInfo() {
      if (this.$refs["userDataForm"] != null) {
        this.$refs["userDataForm"].resetFields();
      }
      this.userDataForm.index_ = null;
      this.userModal = true;
    },
    deleteUserInfo(index) {
      console.log(index);
      this.$confirm("确认删除当前数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.tableDatalink.splice(index, 1);
        this.$message({ message: "删除成功", type: "success" });
      });
    },

    setPrimaryContact(index) {
      this.tableDatalink[index].dmainContactsFlag = 2;
      this.$set(this.tableDatalink, index, this.tableDatalink[index]);
      this.$message({ message: "设置成功", type: "success" });
    },
    //编辑
    editUser(row) {
      if (this.$refs["userDataForm"] != null) {
        this.$refs["userDataForm"].resetFields();
      }
      this.userDataForm = row;
      this.userModal = true;
    },

    //选择店铺
    selectTableDatashopmodal(val) {
      this.selectTableDatashopmodalData = val;
    },

    saveShopList() {
      if (this.selectTableDatashopmodalData.length < 1) {
        this.$message({ message: "至少选择一条数据", type: "warning" });
        return false;
      }
      this.selectTableDatashopmodalData.forEach((item) => {
        this.tableDatashop.push(item);
      });
      this.selectTableDatashopmodalData = [];
      this.shopModal = false;
      this.$message({ message: "添加成功", type: "success" });
    },

    // 查询商品列表
    queryShopapi() {
      let this_ = this;
      if (this_.queryFiteris === undefined || this_.queryFiteris === null) {
        this_.queryFiteris = {};
      }
      // this_.dataForm.pageNum = data === null || data === undefined ? this.pageRequest.pageNum : data;
      this_.queryFiteris.limit = this.pageRequestProduct.limit;
      this_.queryFiteris.start = this.pageRequestProduct.start;
      this.utils.request.queryShopApi(this_.queryFiteris, function (res) {
        if (res.code === "0000") {
          this_.shopFilters.res.rows = res.data.rows;
          this_.shopFilters.res.total = res.data.total;
          console.log(res.data);
          console.log(this_.tableData);
          // this_.totalSize = Number(res.data.total);
          this_.$refs.CyTable.findPageStaticState(this_.shopFilters);
        } else {
          this_.tableData = [];
          this_.totalSize = 0;
        }
      });
    },

    handleSelectionChangeShop(val) {
      this.multipleSelectionShop = val;
      console.log(JSON.stringify(this.multipleSelectionShop));
    },
    handleSizeChangeProduct(val) {
      console.log(`每页 ${val} 条`);
      this.pageRequestProduct.limit = val;
      this.queryShopapi();
    },
    handleCurrentChangeProduct(val) {
      console.log(`当前页: ${val}`);
      this.pageRequestProduct.start = val;
      this.queryShopapi();
    },

    selectProduct() {
      this.queryShopapi();
      this.selectProductModel = true;
    },

    saveProduct() {
      if (this.multipleSelectionShop.length < 1) {
        this.$message({ message: "至少选择一条数据", type: "warning" });
        return;
      }
      //  else if (this.multipleSelectionShop.length > 1) {
      //   this.$message({ message: "只能选择一条数据", type: "warning" });
      //   return;
      // }
      this.paramsFilters.res.rows = this.multipleSelectionShop;
      this.selectProductModel = false;
    },

    detailList() {
      this.$router.push({
        path: `/paje/Consignmentcontract1`,
      });
    },

    next() {
      if(this.active == 1){
          this.$refs['dataForm'].validate((valid) => {
            if (valid) {
              let param = {};
              this.dataForm.id = this.contractId;
              this.dataForm.code = this.contractCode;
              param.purchaseContract = this.dataForm;
              param.contractCostList = this.tableDataprice;
              param.contractAnnexList = this.tableDataFile;
              param.contractPersonList = this.tableDatalink;
              param.contractStoreList = this.tableDatashop;

              this.utils.request.updatePurchaseContract(param,res=>{
                if(res.code == '0000'){
                  this.active++;
                  this.utils.request.listPurchaseContractProductRelAllRecord({"contractCode":this.contractCode},resp=>{
                    resp.data.forEach(item =>{
                      item.chineseName = item.productName,
                      item.code = item.productCode,
                      item.status = item.canSale
                    })
                    this.paramsFilters.res.rows = resp.data;
                  })
                }else{
                  this.$message({ message: res.msg, type: "error" });
                }
              })
            }
          })
      }
      if(this.active == 2){
        var this_ = this;
        console.log(this_.paramsFilters);
        let datass = this_.paramsFilters.res.rows;
        for (var i = 0; i < datass.length; i++) {
          if (
            datass[i].amountWithoutTax == 0 ||
            datass[i].amountWithoutTax == undefined ||
            datass[i].amountWithoutTax == null ||
            datass[i].amountWithoutTax == ""
          ) {
            this_.$message({ message: "请输入采购价", type: "error" });
            return;
          }
        }
        this.utils.request.deleteByContractCode({contractCode:this.contractCode}, res=>{
          datass.forEach(element => {
            element.contractCode = this.contractCode;
            element.productName = element.chineseName;
            element.productCode = element.code;
            element.status = element.canSale
            element.deleteFlag = 0;
            // element.amountWithoutTax = element.purchaseNum;
            // element.purchaseNum = null;
            element.id = null;
            this_.utils.request.addPurchaseContractProductRel(element, function(
              res1
            ) {});
          });
        })
        // this_.$message({ message: "操作成功", type: "success" });
        this_.pageRequestProduct.start = 1;
        this_.pageRequestProduct.limit = 10;
        this.active++;
        this_.multipleSelectionShop = [];
      }
    },
    back() {
      this.active--;
    },
  },
  created(){
    this.contractCode = this.$route.query.contractCode;
    this.contractId = this.$route.query.id;
    this.edit = this.$route.query.edit;
    this.busiType = this.$route.query.busiType;
    this.dataForm.code = this.contractCode;
    this.dataForm.busiType = this.$route.query.busiType;

    if(this.contractCode == null || this.contractId == null){
      this.$message({"message":"非法访问","type":"error"}); 
    }

    this.utils.request.queryInfoPurchaseContract({"id":this.contractId},res=>{
        this.dataForm = res.data.purchaseContract;
        if(this.dataForm.billSettlement == 0){
          this.$set(this.dataForm,"billSettlement",null);
        }
        if(this.dataForm.paymentPeriod == 0){
          this.$set(this.dataForm,"paymentPeriod",null);
        }
        if(this.dataForm.supportInvoicing == 0){
          this.$set(this.dataForm,"supportInvoicing",1);
        }
        if(this.dataForm.supportSpecialTicket == 0){
          this.$set(this.dataForm,"supportSpecialTicket",1);
        }

        if(this.$refs['dataForm'] != null){
          this.$refs['dataForm'].clearValidate();
        }
        this.tableDataprice = res.data.contractCostList;
        this.tableDataFile = res.data.contractAnnexList;
        this.tableDatalink = res.data.contractPersonList;
        this.tableDatashop = res.data.contractStoreList;
    })

  }
};
</script>

<style lang="scss" scoped>
@import "../../assets/css/public.scss";
/deep/ .stepset ul li {
  width: 355px;
}

/deep/ .el-input__inner  {
      width: 200px;
}
 .el-form-item--mini.el-form-item,
 .el-form-item--small.el-form-item  {
      margin-bottom: 10px;
}
.t_r {
  margin: 5px 0px 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
  font-size: 18px;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

/deep/ .el-tab-pane .el-col {
  margin-top: 20px;
  margin-bottom: 20px;
}

/deep/ .radio-item .el-form-item__content {
  height: 32px !important;
  line-height: 32px !important;
}
</style>